<!-- 客户首页 -->
<template>
	<view class="page">
		<!-- 导航栏 -->
		<CustomNavbar :scroll-top="scrollTop"></CustomNavbar>
		<!-- 滚动区域 -->
		<scroll-view class="scroll-view" scroll-y :refresher-enabled='false' scroll-with-animation
			:scroll-top="setScrollTop" @scroll="handleScrollEvent">
			<!-- 占位 -->
			<view :style="[navbarStyle]"></view>
			<!-- 页面背景图 -->
			<PageBg></PageBg>
			<!-- 搜索 -->
			<Search></Search>
			<!-- 分类 -->
			<Category></Category>
			<!-- 新人优惠券 -->
			<DiscountCoupon></DiscountCoupon>
			<!-- 快速提问 -->
			<QuickAsk></QuickAsk>
			<!-- 列表 -->
			<List :scroll-top="scrollTop" @scroll-to="handleSetScrollTop"></List>
		</scroll-view>

		<!-- 底部标签栏 -->
		<c-customer-tabbar class="tabbar" :index="1"></c-customer-tabbar>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import PageBg from "./components/page-bg.vue";
	import CustomNavbar from "./components/custom-navbar.vue";
	import Search from "./components/search.vue";
	import Category from "./components/category.vue";
	import DiscountCoupon from "./components/discount-coupon.vue";
	import QuickAsk from './components/quick-ask.vue';
	import List from "./components/list.vue";

	// 导航栏高度
	const navbarStyle = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return { 'padding-top': statusBarHeight + 'px', 'height': navBarHeight + 'px' };
	}();

	// 滚动条位置是否变化了
	const scrollChange = ref(false);
	// 滚动距离
	const scrollTop = ref(0);
	// 页面滚动事件
	const handleScrollEvent = (e) => {
		scrollTop.value = e.detail.scrollTop;
		scrollChange.value = true;
	}

	// 手动设置滚动位置
	const setScrollTop = ref(0);
	// 手动设置滚动位置
	const handleSetScrollTop = (value) => {
		if (setScrollTop.value !== value || scrollChange.value) {
			setScrollTop.value = scrollTop.value; // value的值每次都一样，为了确保每次都能滚动，必须让原来设定的值有变化
			nextTick(() => {
				setScrollTop.value = value;
				scrollTop.value = value; // 确保导航栏背景色提前变成红色
			});
		}
		scrollChange.value = false;
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll-view {
			flex-grow: 1;
			position: relative;
			z-index: 1;
			height: 0;
		}

		.tabbar {
			flex-shrink: 0;
		}
	}
</style>